<template>
	<view class="DistributionAudit" :style="{ '--color': vuex_config.adminTheme, '--price': vuex_config.adminPrice }">
		<view class="search">
			<u-search placeholder="搜索" v-model="name" @search="initPage" @custom="initPage" @clear="initPage()"
				shape='square' :action-style='style' style="width: 100%;"></u-search>
		</view>
		<view class="box">
			<view class="item" v-for="(item,index) in dataList" :key='index'>
				<image :src="item.headimgurl" mode=""></image>
				<view class="iten-center">
					<text class="u-font-28 fw-bold">{{item.real_name}}</text>
					<view class="phone">
						<text>手机号：</text>
						<text>{{item.mobile}}</text>
					</view>
					<view class="member">
						<text>会员号：</text>
						<text>{{item.pk_id}}</text>
					</view>
					<view class="time">
						<text>时间：</text>
						<text>{{item.date_creation|formTime()}}</text>
					</view>
				</view>
				<view class="item-right">
					<view class="btn success" @click="openShow(item)">审核</view>
				</view>
			</view>
		</view>
		<u-modal v-model="show" title='审核' show-cancel-button confirm-text='同意' cancel-text='不同意' @confirm="onSumbit" @cancel="cancel">
			<view class="modal">
				<u-field v-model="Grade.name" label-width='150' input-align='right' label="分销商等级:" placeholder="请选择分销商等级" disabled @click="this.propshow = true">
				</u-field>
			</view>
		</u-modal>
		<u-picker v-model="propshow" mode="selector" :range="GradeList" range-key="name" @confirm="change"></u-picker>
		<sww-load-more :params="dataListParams"></sww-load-more>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/sysPaging.js'
	import {
		formatDate
	} from '@/utils/moment/index.js';
	import {
		uniModal,
		uniToast
	} from '@/utils/uniPromise.js'
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				style: {
					backgroundColor: '#3297ef',
					color: '#fff',
					lineHeight: '64rpx',
					margin: '0',
					width: '100rpx',
					borderRadius: '0 10rpx 10rpx 0'
				},
				dataList: [],
				name: '',
				GradeList:[],
				selectitem:{},//选中的审核
				Grade: {
					name: ''
				},
				show: false,
				propshow:false
			}
		},
		onReachBottom() {
			this._load_data();
		},
		filters: {
			formTime(val) {
				return formatDate(val, 'YYYY-MM-DD HH:mm:ss');
			}
		},
		onLoad() {
			this.initPage()
		},
		methods: {
			initPage() {
				let params = {
					name: this.name,
					type: 3,
					fk_business_id:this.vuex_adminuser.pk_id
				}
				this._init_data('GetUsersList', params)
				this.$GetQueryDataList('b_users_grade',1,200,{type:2,fk_business_id:this.vuex_business.pk_id},{setting:true,api:true}).then(res=>{
					console.log(res.data)
					this.GradeList = res.data
				})
			},
			change(val){
				// console.log(val[0])
				this.Grade = this.GradeList[val[0]]
			},
			openShow(item){
				this.show = true
				this.selectitem = item
			},	
			onSumbit(){
				if(!this.Grade.name){
					return uniToast('分销等级不能为空')
				}
				this.$UpdateModify('u_users_webchat',{pk_id:this.selectitem.users_webchat_id,type:2,level:this.Grade.pk_id,fk_business_id:this.vuex_business.pk_id},{setting:true}).then(res=>{
					this.initPage()
				})
			},
			cancel(){
				this.$UpdateModify('u_users_webchat',{pk_id:this.selectitem.users_webchat_id,type:1,level:this.Grade.pk_id,fk_business_id:this.vuex_business.pk_id},{setting:true}).then(res=>{
					this.initPage()
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.DistributionAudit {
		.search {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-top: 1rpx solid #f9f9f9;
		}
		.modal{
			min-height: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.box {
			padding: 0 30rpx;

			.item {
				width: 100%;
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				border-radius: 20rpx;
				margin-top: 20rpx;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
				}

				.iten-center {
					display: flex;
					flex-direction: column;
					width: 59%;
					padding: 10rpx 10rpx 10rpx 20rpx;
					justify-content: space-between;

					.phone,
					.member,
					.time {
						display: flex;
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}

				.item-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 30rpx 0 10rpx;

					.btn {
						width: 100rpx;
						line-height: 48rpx;
						color: #fff;
						border-radius: 10rpx;
						text-align: center;
					}

					.success {
						background-color: var(--color);
					}

					.error {
						margin-top: 30rpx;
						background-color: var(--price);
					}
				}
			}
		}
	}
</style>
